// 创建一个 createContext 函数，接收一个初始值
function createContext(initialValue) {
  // 创建一个 context 对象，包含 Provider 和 useContext 方法
  const context = {};

  // 定义一个内部的 Provider 组件
  function Provider(props) {
    // 将传入的 value 存储在 context 对象中
    context.value = props.value;

    // 渲染 Provider 的子组件
    return props.children;
  }

  // 定义一个内部的 useContext 钩子函数，接收 context 参数
  function useContext(context) {
    // 返回 context 对象中保存的 value 值
    return context.value;
  }

  // 返回 context 对象，包含 Provider 和 useContext 方法
  return { Provider: Provider, useContext: useContext, context: context };
}

// 示例用法
// 创建一个 context 对象
const MyContext = createContext();

// 使用 context 对象的 Provider 组件和 useContext 钩子函数
function App() {
  return (
    <MyContext.Provider value="Hello, React!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  // 使用 useContext 获取 context 中的值
  const value = MyContext.useContext(MyContext.context);

  return <div>{value}</div>;
}

// 渲染根组件
ReactDOM.render(<App />, document.getElementById("root"));
